<template>
  <div class="edreport">
    <div class="searchtitle">
      <div class="searchitem">
       <div class="item_id">代理商higo号码</div>
        <el-input v-model="searchdetail.mallErbanNo" class="inputline_id" prefix-icon="el-icon-search" placeholder="请输入内容"></el-input>
      </div>
      <div class="searchitem">
      <div class="item_name">代理商真实姓名</div>
        <el-input v-model="searchdetail.mallRealName" class="inputline_name"  prefix-icon="el-icon-search" placeholder="请输入内容"></el-input>
      </div>
      <div class="searchitem">
      <div class="item_user">代充用户</div>
        <el-input  v-model="searchdetail.userErbanNo" class="inputline_user" prefix-icon="el-icon-search" placeholder="请输入内容"></el-input>
      </div>
      <div class="searchitem">
        <div class="item_time">时间</div>
        <el-date-picker
            class="inputline_date"
            v-model="searchdetail.datetime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            >
<!--          :picker-options="pickerOptions"-->
        </el-date-picker>
      </div>
      <el-button icon="el-icon-search" @click="searchreport(searchdetail)" type="primary" size="mini" class="searchreport" circle></el-button>
         <el-button icon="el-icon-refresh-left" @click="resetReport" type="warning" size="mini" class="resetreport" circle></el-button>
    </div>
    <div class="content">
     <div class="total">
        <span>统计值:</span>
        代充人数:{{number}}&nbsp;&nbsp;&nbsp;总代理金币:{{totalCoin}}&nbsp;&nbsp;&nbsp;代理商人数:{{mallNumber}}
      </div>
      <el-button :loading="download" @click="exportExcel" type="primary" class="export" size="mini">导出表格</el-button>
      <el-table
          :data="currentData"
          style="width: 100%;font-size: 13px;margin-top: 20px"
          border
          max-height="550">
        <el-table-column
            align="center"
            prop="orderNo"
            label="代充订单号"
            width="110">
        </el-table-column>
        <el-table-column
            align="center"
            prop="mallErbanNo"
            label="代理商higo号"
            width="110">
        </el-table-column>
        <el-table-column
            align="center"
            prop="realName"
            label="代理商真实姓名"
            width="120">
        </el-table-column>
        <el-table-column
            align="center"
            prop="mallUid"
            label="UID"
            width="70">
        </el-table-column>
        <el-table-column
            align="center"
            prop="agentTyoe"
            label="代理类型"
            width="80">
        </el-table-column>
        <el-table-column
            align="center"
            prop="coin"
            label="代充金币"
            width="80">
        </el-table-column>
        <el-table-column
            align="center"
            prop="erbanNo"
            label="代充用户higo号"
            width="115">
        </el-table-column>
        <el-table-column
            align="center"
            prop="nick"
            label="代充用户昵称"
            width="100">
        </el-table-column>
        <el-table-column
            align="center"
            prop="richlevel"
            label="代充用户财富"
            width="100">
        </el-table-column>
        <el-table-column
          align="center"
          prop="charmlevel"
          label="代充用户魅力"
          width="100">
      </el-table-column>
        <el-table-column
            align="center"
            prop="chargeTime"
            label="充值时间"
            width="130">
        </el-table-column>
         <el-table-column
            align="center"
            prop="arrivalTime"
            label="到账时间"
            width="130">
        </el-table-column>
        <el-table-column
            align="center"
            prop="chargetime"
            label="用户实名"
            width="90">
            <template slot-scope="scope">
            <el-button type="text" size="mini" @click="openUserRealInfo(scope.row.uid)">实名信息</el-button>
            </template>
        </el-table-column>
      </el-table>
        <el-pagination
  class="foot"
  background
  layout="prev, pager, next"
  :total="itemnum"
  @current-change="handleCurrent"
  :current-page.sync="pageNo"
  >
</el-pagination>
    </div>
  <el-dialog
  title="用户实名信息"
  :visible.sync="userRealVisible"
  width="30%"
  :before-close="realHandleClose">
  
  <el-form label-position="left"
   label-width="80px"
  :model="userRealinfo"
    v-if="userRealinfo.realName"
  >
  <el-form-item label="真实姓名">
    {{userRealinfo.realName}}
  </el-form-item>
  <el-form-item label="身份证号">
   {{userRealinfo.idCardNo}}
  </el-form-item>
  <el-form-item label="证件照">
 <el-upload
  class="upload-demo"
  action="#"
  :file-list="[
  {name: '证件国徽照', url: userRealinfo.idCardFront},
  {name: '证件人像照', url: userRealinfo.idCardOpposite},
  {name: '手持照', url: userRealinfo.idCardHandheld}
  ]"
  :auto-upload="false"
  list-type="picture"
  :disabled="true"
  >
</el-upload>
  </el-form-item>
</el-form>



  <span slot="footer" class="footmid" >
    <el-button  type="primary" @click="realHandleClose">确 定</el-button>
  </span>
</el-dialog>



  </div>
</template>

<script>
import {getAgentReport,agentRechargeCoinstatistics,agentRealinfo, appUserRealInfo}from "../Util/request"
import { clctime } from '../Util/tool'
export default {
    data(){
      return{
        searchdetail:{
          mallRealName:"",
          mallErbanNo:"",
          userErbanNo:"",
          datetime:[],
          startTime:null,
          endTime:null

        },
        tableData: [],
        userRealVisible:false,
        itemnum:0,
        pageNo:1,
        number:0,//代充人数
        totalCoin:0,//代理金币
        mallNumber:0,//代理商人数
        currentData:[],
        userRealinfo:{
         uid: '',
         realName: "",
         idCardNo: "",
         idCardFront: "",
         idCardOpposite: "",
         idCardHandheld: "",
         phone: "",
        },
        download:false

      }
    },
    created(){
      this.getlistData({})
      agentRechargeCoinstatistics((res)=>{
        this.number= res.data.number
        this.totalCoin=res.data.totalCoin
        if(res.data.mallNumber>1000){
          res.data.mallNumber=res.data.mallNumber/1000 +"k"
        }else if(res.data.mallNumber>10000){
          res.data.mallNumber=res.data.mallNumber/10000 +"w"
        }
        this.mallNumber=res.data.mallNumber
      },{})
      
    },
    methods:{
      getlistData(e){
            getAgentReport((res)=>{
              this.currentData =res.data.list
              this.itemnum = res.data.total
              this.currentData.forEach((el,index)=>{
                  switch (el.agentTyoe) {
                    case 1:
                  this.currentData[index].agentTyoe= "海外代理"
                      break;
                    case 2:
                 this.currentData[index].agentTyoe="国内代理"
                      break
                    case 3:
                  this.currentData[index].agentTyoe="海内外代理"
                      break
                   
                  }
              })


            },e)
      },
      realHandleClose(){
        this.userRealVisible=false
         this.userRealinfo={
         uid: '',
         realName: "",
         idCardNo: "",
         idCardFront: "",
         idCardOpposite: "",
         idCardHandheld: "",
         phone: "",
        }
      },

      handleCurrent(e){
       let temp ={}
        if(this.searchdetail.datetime[0]){
          temp.startTime= clctime(this.searchdetail.datetime[0],true)
          temp.endTime=clctime(this.searchdetail.datetime[1])
        }
        for(let i  in this.searchdetail){
          if(i!="datetime"){
            if(this.searchdetail[i]){
              temp[i]=this.searchdetail[i]
            }
          }
        }
        this.pageNo =e
        this.getlistData({
          page:e,
          ...temp
        })
      },
      openUserRealInfo(e){
        this.userRealVisible=true
        console.log(e);
        appUserRealInfo((res)=>{
          this.userRealinfo =res.data
        },{
          uid:e
        })
      },
      resetReport(){
        this.searchdetail={
          mallRealName:"",
          mallErbanNo:"",
          userErbanNo:"",
          datetime:[],
          startTime:null,
          endTime:null

        }
        this.pageNo=1
        this.getlistData({})
      },
      searchreport(){
        //搜索
        let temp ={}
        if(this.searchdetail.datetime[0]){
          temp.startTime= clctime(this.searchdetail.datetime[0],true)
          temp.endTime=clctime(this.searchdetail.datetime[1])
        }
        for(let i  in this.searchdetail){
          if(i!="datetime"){
            if(this.searchdetail[i]){
              temp[i]=this.searchdetail[i]
            }
          }
        }
        if(temp.startTime||temp.endTime){
         agentRechargeCoinstatistics((res)=>{
        this.number= res.data.number
        this.totalCoin=res.data.totalCoin
        if(res.data.mallNumber>1000){
          res.data.mallNumber=res.data.mallNumber/1000 +"k"
        }else if(res.data.mallNumber>10000){
          res.data.mallNumber=res.data.mallNumber/10000 +"w"
        }
        this.mallNumber=res.data.mallNumber
       },{
        startTime:temp.startTime,
        endTime:temp.endTime
       })
        }

      this.getlistData({
        ...temp,
        page:this.p
        })
        this.pageNo=1
      },
      exportExcel() {
        this.download = true
       getAgentReport((res)=>{
        this.tableData = res.data.list   
        this.tableData.forEach((el,index)=>{
                  switch (el.agentTyoe) {
                    case 1:
                  this.tableData[index].agentTyoe= "海外代理"
                      break;
                    case 2:
                 this.tableData[index].agentTyoe="国内代理"
                      break
                    case 3:
                  this.tableData[index].agentTyoe="海内外代理"
                      break
                   
                  }
              })            
      import('@/Util/Export2Excel.js').then(excel => {
        const tHeader = ['代充订单号','代理商higo号','代理商真实姓名','UID','代理类型','代充金币','代充用户higo号','代充用户昵称','代充用户财富','代充用户魅力','代充时间']
        const filterVal = ['orderNo', 'mallErbanNo', 'realName', 'mallUid', 'agentTyoe',"coin",'erbanNo','nick','richlevel','charmlevel','createTime']
        const list = this.tableData;
        const data =  this.formatJson(filterVal,list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: "HIGO COINS REPORT",
          autoWidth: true,
          bookType: "xlsx"
        })
      })
      this.download = false
            },{
              rows:this.itemnum
            })









      },
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => v[j]))
      },
    },
 
}
</script>

<style lang="less"  scoped>

  .edreport{
    width:100%;
    height:100%;
    .searchtitle{
      position: relative;
      display: flex;
      margin: 15px auto 0;
      width: 100%;
      height: 100px;
      background-color: #fff;
      border-radius: 5px;
      //justify-content: space-between;
      .searchitem{
        margin: auto 0;
        //display: flex;
        width: 260px;
        height: 40px;
        line-height:40px ;
        font-size: 17px;
        //background-color: red;
        .item_id{
            display: inline-block;
            width: 125px;
        }
        .item_name{
          display: inline-block;
        }
        .item_user{
          display: inline-block;
        }
        .item_time{
          display: inline-block;
        }
        .inputline_id{
          display:inline-block;
          width:125px;
          height: 100%;

        }
        .inputline_name{
          display:inline-block;
          width:130px;
          height: 100%;
        }
        .inputline_user{
          display:inline-block;
          width:140px;
          height: 100%;

        }
        .inputline_date{
          //display:inline-block;
          width: 280px;
          height: 100%;
        }

      }
      .searchreport{
        position: absolute;
        right: 143px;
        bottom: -46px;
        z-index: 10;
      }
      .resetreport{
        position: absolute;
        bottom: -46px;
        right: 180px;
        z-index: 10;
      }
    }
    .searchitem:nth-child(3){
      width: 215px;
      //background-color: blue;
    }
    .searchitem:nth-child(4){
      width: 315px;
      //background-color: red;
    }
    .content{
      width: 100%;
      height: 800px;
      margin-top: 25px;
      //background-color: red;
      position: relative;
      .export{
        position: absolute;
        top: -7px;
        right: 8px;
      }
      .total{
        font-weight: bold;
        h2{
          margin-bottom: 15px;
        }
        font-size:12px;
      }
      .foot{
      position: absolute;
      right: 0;
      
    }
    }

  }

  
      /deep/  ::-webkit-scrollbar{
      height: 10px;
     
      }
        /deep/::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
      border-radius   : 10px;
      background-color: skyblue;
      background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
      );
        }
       /deep/::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
        box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
        background   : #ededed;
        // border: 0;
       }

       
       .footmid{
         display: flex;
         justify-content: center;
       }
</style>